<template>
    <page-container>
        <view slot="header">
            <DownloadApp></DownloadApp>
            <!-- #ifdef MP-WEIXIN -->
            <cu-custom :isBack="true" bgColor="bg-white">
                <block slot="content">云上行通济</block>
            </cu-custom>
            <!-- #endif -->
        </view>
        <view class="activityitemContent" slot="center">
            <!-- #ifdef H5 -->
            <view class="gobackIcon" @click="goBack" v-if="isNativeApp()">
                <image :src="staticImgUrl+'chat/backicon.png'" mode=""></image>
            </view>
            <view class="gobackIcon" @click="goBackTwo" v-if="!isNativeApp()">
                <image :src="staticImgUrl+'chat/backicon.png'" mode=""></image>
            </view>
            <!-- #endif -->
            <block>
                <view class="cbsInfo">
                    <image :src="staticImgUrl+'yxjhd/cbs.png'" mode=""></image>
                </view>
            </block>
            <block v-if="hashdgz==false">
                <view class="bgqiao">
                    <image :src="staticImgUrl+'yxjhd/bgqiao.png'" mode=""></image>
                </view>
            </block>
            <block v-if="showCj==false">
                <view class="showcjbtnIcon" @click="showInfo">
                    <image :src="staticImgUrl+'yxjhd/showcjbtn.png'" mode=""></image>
                </view>
            </block>
            <view class="cjcontent" v-if="showCj==true">
                <LuckyGrid ref="LuckDraw" width="675rpx" height="790rpx" :prizes="prizes" :buttons="buttons" :blocks="blocks" :default-config="defaultConfig" :default-style="defaultStyle" :active-style="activeStyle" @start="startCallBack" @end="endCallBack" />
                </LuckyGrid>
                <view class="btnInfo-item">
                    <view class="iconBtns" @click="tomyprize()">
                        <image :src="staticImgUrl+'yxjhd/wdjp.png'" mode=""></image>
                    </view>

                    <!-- #ifdef MP-WEIXIN -->
                    <button class="iconBtns" open-type="share">
                        <image :src="staticImgUrl+'yxjhd/fxicon.png'" mode="" style="width: 100%;height: 100%;"></image>
                    </button>
                    <!-- #endif -->

                    <!-- #ifdef H5 -->
                    <view class="iconBtns" @click="share">
                        <image :src="staticImgUrl+'yxjhd/fxicon.png'" mode=""></image>
                    </view>
                    <!-- #endif -->
                </view>
            </view>
            <block v-if="hashdgz==true">
                <!-- 活动规则 -->
                <view class="hdgzInfo">
                    <view class="hdgzImg">
                        <image :src="staticImgUrl+'yxjhd/hdgzicon.png'" mode=""></image>
                    </view>
                </view>
                <view class="hdgzItem">
                    <view class="hdgzItemText">1.活动时间即日起至2021年3月1日截止</view>
                    <view class="hdgzItemText">2.用户每日抽奖次数{{join_frequency}}次 </view>
                    <view class="hdgzItemText">3.现金红包存入用户钱包，请到个人中心-我的钱包查看</view>
                    <view class="hdgzItemText">4.通过分享链接进入活动的用户，需要下载APP才可抽奖</view>
                </view>
            </block>
            <block>
                <!-- 合作商家 -->
                <view class="hzsjInfo" :style="{top:hashdgz==true?'80%':'75%'}">
                    <view class="hzsjImg">
                        <image :src="staticImgUrl+'yxjhd/hzsj.png'" mode=""></image>
                    </view>
                </view>
                <view class="hzsjItem" :style="{top:hashdgz==true?'91%':'88%'}">
                    <view class="hzsjItemInfobox">
                        <view class="hzsjItemImg">
                            <image :src="staticImgUrl+'yxjhd/one.png'" mode=""></image>
                        </view>
                        <view class="hzsjItemText">万国影业</view>
                    </view>
                    <view class="hzsjItemInfobox">
                        <view class="hzsjItemImg">
                            <image :src="staticImgUrl+'yxjhd/two.png'" mode=""></image>
                        </view>
                        <view class="hzsjItemText">魔力鲜颜</view>
                    </view>
                    <view class="hzsjItemInfobox">
                        <view class="hzsjItemImg">
                            <image :src="staticImgUrl+'yxjhd/three.png'" mode=""></image>
                        </view>
                        <view class="hzsjItemText">佳时</view>
                    </view>
                    <view class="hzsjItemInfobox">
                        <view class="hzsjItemImg">
                            <image :src="staticImgUrl+'yxjhd/four.png'" mode=""></image>
                        </view>
                        <view class="hzsjItemText">飞乐思</view>
                    </view>
                    <view class="hzsjItemInfobox">
                        <view class="hzsjItemImg">
                            <image :src="staticImgUrl+'yxjhd/five.png'" mode=""></image>
                        </view>
                        <view class="hzsjItemText">庐山百草堂</view>
                    </view>
                    <view class="hzsjItemInfobox">
                        <view class="hzsjItemImg">
                            <image :src="staticImgUrl+'yxjhd/six.png'" mode=""></image>
                        </view>
                        <view class="hzsjItemText">康丰农业</view>
                    </view>
                </view>
            </block>
            <view class="showTipBg-box" v-if="showTipBg == true" @click="closeGb()" @touchmove.prevent></view>
            <view v-if="showTipBg == true" class="tipInfo">
                <view class="closeIcon " @click="closeGb()">
                    <image :src="staticImgUrl+'yxjhd/close.png'" mode=""></image>
                </view>
                <view class="tipbg animation-scale-up" style="animationDelay:.1s;">
                    <view class="zjlText">中奖啦!</view>
                    <view class="zjtipText">恭喜您抽中<text class="tipShop">{{swText}}</text>，奖金已发至钱包，请到个人中心-我的钱包查看</view>
                    <view class="sureBtn" @click="closeGb()">
                        <image :src="staticImgUrl+'yxjhd/surebtn.png'" mode=""></image>
                    </view>
                </view>
            </view>
            <view class="showTipBg-box" v-if="showTipBgnot == true" @click="closeGbAdd()" @touchmove.prevent></view>
            <view class="tipInfo" v-if="showTipBgnot == true">
                <view class="closeIcon" @click="closeGbAdd()">
                    <image :src="staticImgUrl+'yxjhd/close.png'" mode=""></image>
                </view>
                <view class="tipbg animation-scale-up" style="animationDelay:.1s;">
                    <view class="zjlText">中奖啦!</view>
                    <view class="zjtipText" v-if="hasAddres==null">恭喜您抽中<text class="tipShop">{{swText}}</text>，请填写地址，工作人员将在7个工作日内发货</view>
                    <view class="zjtipText" v-if="hasAddres!=null">恭喜您抽中<text class="tipShop">{{swText}}</text>，工作人员将在7个工作日内发货</view>
                    <view class="sureBtn" @click="toAdd()" v-if="hasAddres==null">
                        <image :src="staticImgUrl+'yxjhd/tianxiedizhi.png'" mode=""></image>
                    </view>
                    <view class="sureBtn" @click="closeGbAdd()" v-if="hasAddres!=null">
                        <image :src="staticImgUrl+'yxjhd/surebtn.png'" mode=""></image>
                    </view>
                </view>
            </view>
            <view class="showTipBg-box" v-if="showTipBgAdd == true" @click="closeGbnot()" @touchmove.prevent></view>
            <view class="tipInfo" v-if="showTipBgAdd == true">
                <view class="closeIcon" @click="closeGbnot()">
                    <image :src="staticImgUrl+'yxjhd/close.png'" mode=""></image>
                </view>
                <view class="tipbg animation-scale-up" style="animationDelay:.1s;">
                    <view class="zjlText">未中奖!</view>
                    <view class="zjtipText">很遗憾，您未中奖，请再接再厉！ </view>
                    <view class="sureBtn" @click="closeGbnot()">
                        <image :src="staticImgUrl+'yxjhd/surebtn.png'" mode=""></image>
                    </view>
                </view>
            </view>
            <!-- #ifdef H5 -->
            <view class="showTipBg-box" v-if="showTipBgShares == true" @click="showTipBgShares=false"></view>
            <view class="showTipBgShares-box" v-if="showTipBgShares == true" @click="showTipBgShares=false">
                <image :src="staticImgUrl+'yxjhd/h5fxicon.png'" mode=""></image>
            </view>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <block v-if="!isNativeApp() && shareContent != null">
                <wx-config :shareContent="shareContent"></wx-config>
            </block>
            <!-- #endif -->
        </view>
    </page-container>
</template>

<script>
// 转盘配置信息 https://100px.net/docs/grid/defaultConfig.html
import LuckyGrid from 'uni-luck-draw/lucky-grid' // 九宫格
import DownloadApp from '@/common/components/global/download-app.vue'
// #ifdef H5
import wxConfig from '@/common/components/global/wx-config.vue'
// #endif
import http from '../../common/js/http.js'
export default {
	data() {
		return {
			// 分享
			showTipBgShares: false,
			// 实物名字
			swText: '',
			// 地址信息
			hasAddres: null,
			// 中奖提示
			showTipBg: false,
			showTipBgnot: false,
			showTipBgAdd: false,
			// 商家规则
			hashdgz: false,
			// 抽奖显示
			showCj: false,
			// 后台返回的奖品
			infoItem: null,
			// 是否在抽奖时间内
			startTime: true,
			// 抽奖次数
			luckyNum: 0,
			// 奖品
			prizes: [],
			// 背景
			blocks: [{
				padding: '14px 74.5px 15.5px 15.5px',
				background: 'linear-gradient(0deg, #FFF1C0, #FFD187)',
				borderRadius: '40rpx'
			},
			{
				padding: '5px',
				background: '#EC3907',
				borderRadius: '30rpx'
			}
			],
			// 默认配置
			defaultConfig: {
				gutter: 5
			},
			// 默认样式
			defaultStyle: {
				borderRadius: '20rpx',
				fontColor: '#AC482D',
				fontSize: '24rpx',
				textAlign: 'center'
				// background: '#FFFFFF',
			},
			// 中奖标记
			activeStyle: {
				background: 'linear-gradient(270deg, #FFD97F, #FFD97F)'
				// shadow: '0 5 1 #FDC689'
			},
			// 控制不能连续点击
			notBtn: false,
			// h5分享
			shareContent: {
				title: '云上行通济', // 分享标题
				shareObjectDesc: '云上行通济 把财带回家', // 分享描述
				thumbUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logoWxlogin.png' // 分享图标
			},
			pagesLen: null,
			award_idA: null,
			showTextTipTime: ''
		}
	},
	components: {
		LuckyGrid,
		DownloadApp,
		// #ifdef H5
		wxConfig
		// #endif
	},
	computed: {
		// 抽奖按钮
		buttons() {
			return [{
				x: 1,
				y: 1,
				background: 'linear-gradient(270deg, #FFD97F, #FFD97F)',
				// shadow: '0 5 1 #e89b4f',
				fonts: [{
					text: `${this.luckyNum} 次机会`,
					fontColor: '#DF424B',
					top: '75%',
					fontSize: '12px',
					textAlign: 'center'
				}],
				imgs: [{
					src: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/yxjhd/choubtn.png',
					width: '50%',
					top: '10%'
				}]
			}]
		}
	},
	onShow() {
		this.getPrizeList()
		this.getis_addr()
		this.pagesLen = getCurrentPages().length
	},
	mounted() {

	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target)
		}
		var title = '云上行通济 把财带回家'
		var path = '/pages/chatPages/activityitem/activityitem'
		var imageUrl = 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logoWxlogin.png'
		return {
			title,
			path,
			imageUrl
		}
	},
	methods: {
		tomyprize() {
			this.$Router.push({
				path: '/chatPages/activityitem/myprize'
			})
		},
		share() {
			// #ifdef H5
			if (this.isNativeApp()) {
				this.$sdk.share('云上行通济 把财带回家',
					'https://toc.nanyuecloud.com/toc-inst-app/live-shop/test/index.html#/chatPages/activityitem/activityitem',
					'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logoWxlogin.png')
			} else {
				this.showTipBgShares = true
			}
			// #endif
		},
		getis_addr() {
			// #ifdef H5
			if (!this.isNativeApp()) {
				return false
			}
			// #endif
			http.sendRequest({
				url: '/turntable/api/turntable/is_addr'
			}).then(res => {
				this.hasAddres = res.data
			})
		},
		toAdd() {
			this.showTipBgnot = false
			this.$util.redirectTo('/chatPages/activityitem/add_address')
		},
		closeGbnot() {
			// #ifdef H5
			if (!this.isNativeApp()) {
				this.$util.msg('~请点击右上角打开App进行抽奖~')
				return
			}
			// #endif
			this.showTipBgAdd = false
		},
		closeGb() {
			// #ifdef H5
			if (!this.isNativeApp()) {
				this.$util.msg('~请点击右上角打开App进行抽奖~')
				return
			}
			// #endif
			this.showTipBg = false
		},
		closeGbAdd() {
			// #ifdef H5
			if (!this.isNativeApp()) {
				this.$util.msg('~请点击右上角打开App进行抽奖~')
				return
			}
			// #endif
			this.showTipBgnot = false
		},
		showInfo() {
			// #ifdef H5
			if (!this.isNativeApp()) {
				this.$util.msg('~请点击右上角打开App进行抽奖~')
				return
			}
			// #endif
			// #ifdef MP-WEIXIN
			this.$util.msg('~请打开醒目购App进行抽奖~')
			return
			// #endif
			if (!this.$util.isLoginCall()) return false
			this.showCj = true
			this.hashdgz = true
		},
		getPrizeList() {
			// #ifdef H5
			if (!this.isNativeApp()) {
				return false
			}
			// #endif
			// 请求奖品列表
			http.sendRequest({
				url: '/turntable/api/turntable/getTurntableInfo'
			}).then(resp => {
				let index = resp.data.list[0].game_id

				http.sendRequest({
					url: '/turntable/api/turntable/info',
					data: {
						id: index
					}
				}).then(res => {
					// console.log(res)
					this.join_frequency = res.data.join_frequency
					this.luckyNum = res.data.surplus_num
					this.infoItem = res.data
					var startTimestamp = res.data.start_time
					var endTimestamp = res.data.end_time
					this.status(startTimestamp, endTimestamp)
					const data = res.data.award
					const prizes = []
					let axis = [
						[0, 0],
						[1, 0],
						[2, 0],
						[2, 1],
						[2, 2],
						[1, 2],
						[0, 2],
						[0, 1]
					]
					for (let i = 0; i < 8; i++) {
						let item = data[i]
						prizes.push({
							index: i,
							x: axis[i][0],
							y: axis[i][1],
							fonts: [{
								award_type: item.award_type,
								award_id: item.award_id,
								text: ''
							}],
							imgs: [{
								src: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/yxjhd/jpbtnbg.png',
								activeSrc: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/yxjhd/cjbtnbg.png',
								width: '100%',
								height: '100%'
							},
							{
								src: item.award_img,
								width: '55%',
								height: '70%',
								top: '15%'
							}
							]
						})
					}
					this.prizes = prizes
				})

			})

		},
		startCallBack() {
			console.log('点击抽奖')
			// #ifdef H5
			if (!this.isNativeApp()) {
				this.$Utils.msg('~请点击右上角打开App进行抽奖~')
				return
			}
			// #endif
			var notBtn = this.notBtn
			if (notBtn == true) {
				return this.$Utils.tip('~手太快了哦~')
			}

			if (this.startTime == false) {
				return this.$Utils.msg(this.showTextTipTime)
			}

			if (!this.luckyNum) return this.$Utils.msg('~抽奖机会用完啦明天再来吧~')

			this.$refs.LuckDraw.play()
			this.notBtn = true

			http.sendRequest({
				url: '/turntable/api/turntable/getTurntableInfo'
			}).then(resp => {
				let index = resp.data.list[0].game_id
				http.sendRequest({
					url: '/turntable/api/turntable/lottery', data: {
						id: index
					}
				}).then(res => {
					if (!res) {
						console.log(res)
					}
					if (res.award_id) {
						var award_id = res.data.award_id
					} else {
						var award_id = -1
					}
					this.award_idA = res.data.award_name
					setTimeout(() => {
						for (var i = 0; i < this.prizes.length; i++) {
							if (award_id == this.prizes[i].fonts[0].award_id) {
								return this.$refs.LuckDraw.stop(this.prizes[i].index)
							}
						}
					}, 200)
				}).catch(() => {
					var award_id = -1
					setTimeout(() => {
						for (var i = 0; i < this.prizes.length; i++) {
							if (award_id == this.prizes[i].fonts[0].award_id) {
								return this.$refs.LuckDraw.stop(this.prizes[i].index)
							}
						}
					}, 200)
				})

			})

		},
		endCallBack(prize) {
			console.log('抽奖结束回调', prize)
			// award_type 1 积分 2 红包 3 优惠卷 4 实物
			if (prize.fonts[0].award_id == -1) {
				this.showTipBgAdd = true
			}
			if (prize.fonts[0].award_id == -1) {
				this.showTipBgAdd = true
			} else if (prize.fonts[0].award_type == 1 && prize.fonts[0].award_id != -1) {
				if (prize.fonts[0].award_id == this.prizes[i].fonts[0].award_id) {
					this.swText = this.award_idA
					this.showTipBg = true
				}
			} else if (prize.fonts[0].award_type == 2 && prize.fonts[0].award_id != -1) {
				this.swText = this.award_idA
				this.showTipBg = true
			} else if (prize.fonts[0].award_type == 3 && prize.fonts[0].award_id != -1) {
				this.swText = this.award_idA
				this.showTipBg = true
			} else if (prize.fonts[0].award_type == 4 && prize.fonts[0].award_id != -1) {
				this.swText = this.award_idA
				this.showTipBgnot = true
			}
			this.luckyNum--
			this.notBtn = false
		},
		goBack() {
			// #ifdef H5
			if (this.pagesLen == 1) {
				this.$Sdk.exit()
			} else {
				uni.navigateBack({
					delta: 1
				})
			}
			// #endif
		},
		goBackTwo() {
			// 是否需要返回
			if (this.backCallType) {
				this.$emit('cuBack')
			} else {
				// 判断页面栈是否只有一个
				if (this.pagesLen == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			}
		},
		status(startTime, endTime) {
			let now = Date.parse(new Date())
			if (endTime * 1000 - now < 0) {
				this.startTime = false
				this.showTextTipTime = '~活动已结束~'
			} else if (endTime * 1000 - now >= 0) {
				this.startTime = true
				this.showTextTipTime = '~活动开启~'
			} else if (startTime * 1000 - now > 0) {
				this.startTime = false
				this.showTextTipTime = '~活动即将开始~'
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.showTipBg-box {
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
    height: 100%;
    filter: alpha(opacity=80);
    /*设置透明度为60%*/
    opacity: 0.8;
    /*非IE浏览器下设置透明度为60%*/
    z-index: 9999;
}

.tipInfo {
    width: 100%;
    height: 956rpx;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
}

.tipbg {
    width: 100%;
    height: 956rpx;
    background-image: url("https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/yxjhd/tipbg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .zjlText {
        font-size: 48rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #e03828;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .zjtipText {
        width: 412rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #9f5540;
        position: absolute;
        top: 66%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 60rpx;
    }

    .tipShop {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #f63925;
    }

    .sureBtn {
        width: 358rpx;
        height: 117rpx;
        position: absolute;
        top: 84%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.closeIcon {
    width: 72rpx;
    height: 72rpx;
    position: absolute;
    top: 25%;
    left: 80%;
    transform: translate(-50%, -50%);
    z-index: 99999;
}

image {
    width: 100%;
    height: 100%;
}

.activityitemContent {
    width: 100%;
    height: 2168rpx;
    background-image: url("https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/yxjhd/neindexbg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;

    // 头部logo
    .cbsInfo {
        width: 100%;
        height: 216rpx;
    }

    .bgqiao {
        width: 749.9rpx;
        height: 974.6rpx;
        position: absolute;
        top: 49%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    // 抽奖按钮
    .showcjbtnIcon {
        width: 298rpx;
        height: 90rpx;
        position: absolute;
        top: 53.6%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    // 合作商家
    .hzsjInfo {
        width: 686rpx;
        height: 135rpx;
        background-image: url("https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/yxjhd/hzsjbg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);

        .hzsjImg {
            width: 456rpx;
            height: 59rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    // 合作商家列表
    .hzsjItem {
        width: 675rpx;
        height: 385rpx;
        background: rgba(249, 242, 207, 0);
        border: 2rpx solid #edcfa4;
        opacity: 0.8;
        border-radius: 20rpx;
        position: absolute;
        top: 88%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 35rpx;
        display: flex;
        // justify-content: flex-start;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

        .hzsjItemInfobox {
            width: 171rpx;
            height: 150rpx;
            margin-bottom: 45rpx;
            // margin-right: 30rpx;
        }

        .hzsjItemImg {
            width: 92rpx;
            height: 92rpx;
            margin: 0 auto;
        }

        .hzsjItemText {
            padding-top: 13rpx;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fce3b4;
            text-align: center;
        }
    }

    // 活动规则
    .hdgzInfo {
        width: 665rpx;
        height: 137rpx;
        background-image: url("https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/yxjhd/hdgzbg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);

        .hdgzImg {
            width: 456rpx;
            height: 59rpx;
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .hdgzItem {
        width: 675rpx;
        height: 240rpx;
        background: rgba(249, 242, 207, 0);
        border: 2rpx solid #edcfa4;
        opacity: 0.8;
        border-radius: 20rpx;
        position: absolute;
        top: 71%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 36rpx;
    }

    .hdgzItemText {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #fae6be;
        padding-bottom: 10rpx;
    }

    // 抽奖组件
    .cjcontent {
        // width: 300px;
        // height: 300px;
        position: absolute;
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 675rpx;
        height: 810rpx;
        background: #ffaa56;
        border-radius: 40rpx;

        .myprizes {
            position: absolute;
            top: 91%;
            left: 28%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            width: 230rpx;
            height: 80rpx;
            background: #ff625b;
            box-shadow: 0rpx 2rpx 0rpx 0rpx #ff625b;
            border-radius: 40rpx;
            text-align: center;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 80rpx;
        }

        .myprizesTwo {
            position: absolute;
            top: 91%;
            left: 73%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            width: 230rpx;
            height: 80rpx;
            background: #ff625b;
            box-shadow: 0rpx 2rpx 0rpx 0rpx #ff625b;
            border-radius: 40rpx;
            text-align: center;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 80rpx;
        }
    }
}

.btnInfo-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.iconBtns {
    width: 299rpx;
    height: 90rpx;
}

.showTipBgShares-box {
    width: 309rpx;
    height: 473rpx;
    position: fixed;
    top: 25%;
    left: 70%;
    transform: translate(-50%, -50%);
    z-index: 99999;
}

/* #ifdef MP-WEIXIN */
button::after {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

button {
    width: 290rpx;
    height: 90rpx;
    padding: 0 !important;
    background-color: transparent !important;
    border-radius: none !important;
}

/* #endif */
.gobackIcon {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background-color: #000000;
    position: absolute;
    top: 3%;
    left: 8%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    opacity: 0.5;
}

.gobackIcon image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
